<template>
	<!-- 购物车 -->
	<scroll-view scroll-y class="container">
		<view class="content-wrap">
			<view class="content-item">
				<view class="goods" v-for="(item,index) in list" :key="index">
					<label :class="item.checked?'act':''"  @click="checkCart(item._id,index)"><!-- 单选 --><!-- v-model="list[index].checked" -->
						<text class="iconfont icon-danxuan-weixuan"></text>
					</label>
					<view class="good"><!-- :checked="item.checked" -->
						<view class="img-wrapper"><image :src="item.img"></image></view>
						<view class="good-content">
							<view class="good-title text-line">{{item.name}}</view>
							<view class="spec">
								<view class="spec1"><text class="name ellipsis">{{item.attr}}</text></view><!-- 规格 -->
							</view>
							<view class="good-desc">
								<view class="good-price">
									<text>￥</text>
									{{sum(index)}}
								</view>
								<view class="goods-number-button">
									<button @click="reduce(index)">-</button><input type="text" value="1" v-model="item.num"><button @click="add(index)">+</button>
								</view>
								<text class="del" @click="del(item._id,index)">删除</text>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="total-wrap">
			<view class="total-left">
				<label :class="allcheck?'act':''">
					<text @click="allCart" class="iconfont icon-danxuan-weixuan"></text>
					<text>全选</text>
				</label>

				<view class="total-con">
					<view class="top-con">
						合计:
						<text class="symbol">￥</text>
						<text class="total">{{allsum()}}</text>
					</view>
				</view>
			</view>

			<view class="total-right" @click="buy">购买</view>
		</view>
	</scroll-view>
</template>

<script>
import numberBox from '@/components/numberbox/numberbox.vue';
export default {
	components: {
		numberBox
	},
	data() {
		return {
			num:'',
			uid:'',
			list:[],
			ids:{},//选中的商品的id
			allcheck:false,
			host:'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http'
		}
	},
	// onShow页面显示就执行
	onShow() {
		// 获取本地数据API
		uni.getStorage({
			key: 'token',
			success: res => {
				// 数据获取成功 用户已登陆
				console.log(res);
			},
			fail: err => {
				console.log('尚未登陆，请先登录');
				uni.navigateTo({
					url: '/pages/public/login'
				});
			}
		});
		this.cartlist()
	},
	onTabItemTap() {
		this.cartlist()
	},
	methods: {
		numberChange() {},
		// 购物车列表
		cartlist(index){
			let uid=uni.getStorageSync('uid')
			// console.log(this.productlist.attr);
			this.uid=uid
			// 立即购买
			uni.request({
				method:'POST',
				url:this.host+'/api/get_cart_list',
				data:{
					uid:this.uid
				},
				success:(res)=>{
					this.list=res.data.data
					console.log(this.list)
					
					// 单选控制全选
					for(let i=0;i<this.list.length;i++){
						if(this.list[i].checked==false){
							return this.allcheck=false
						}
						// console.log(this.list[i].checked);
					}
					return this.allcheck=true
					
				},//请求成功回调，带参数
				fail:()=>{
					console.log("请求失败")
				}//请求失败
			})
		},
		// 数量增加
		add(index){
			this.list[index].num++
			uni.request({
				method:'POST',
				url:this.host+'/api/change_cart_num',
				data:{
					_id:this.list[index]._id,
					num:this.list[index].num
				},
				success:(res)=>{
					console.log(res.data.msg)
				},
				fail:()=>{
					console.log("请求失败")
				}//请求失败
			})
		},
		// 数量减少
		reduce(index){
			if(this.list[index].num>1){

				this.list[index].num--//先减 在赋值 
				}else{
					uni.$u.toast("最少为1")
				}
				uni.request({
					method:'POST',
					url:this.host+'/api/change_cart_num',
					data:{
						_id:this.list[index]._id,
						num:this.list[index].num
					},
					success:(res)=>{
						console.log(res.data.msg)
						console.log(this.list[index].num);
						if(this.list[index].num<=1){
							this.list[index].num=1
						}
					},//请求成功回调，带参数
					fail:()=>{
						console.log("请求失败")
					}//请求失败
				})
		},
		// 小计
		sum(index){
			return parseFloat(this.list[index].price*this.list[index].num).toFixed(2) 
		},
		// 总计
		allsum(){
			let sum=0;
			for(let i=0;i<this.list.length;i++){
				if(this.list[i].checked==true){
					sum+=this.list[i].num*this.list[i].price
				}
			}
			return parseFloat(sum).toFixed(2)
		},
		// 删除
		del(_id,index){
			console.log(this.list[index]._id);
			let uid=uni.getStorageSync('uid')
			uni.request({
				method:'POST',
				url:this.host+'/api/remove_cart',
				data:{
					_id:this.list[index]._id
				},
				success:(res)=>{
					console.log(res)
					this.cartlist()
				},
				fail:()=>{
					console.log("请求失败")
				}//请求失败
			})
		},
		// 选中
		checkYes(_id) {
			uni.request({
				method:'POST',
				url: this.host + '/api/check_cart',
				data:{
					_id
				},
				success:(res) => {
					console.log(res);
					this.cartlist()
				},
				fail: () => {
					console.log('请求失败');
				}
			});
		},
		// 取消选中
		checkNo(_id) {
			uni.request({
				method:'POST',
				url: this.host + '/api/cancel_cart',
				data:{
					_id
				},
				success:(res) => {
					console.log(res);
					this.cartlist()
				},
				fail: () => {
					console.log('请求失败');
				}
			});
		},
		// 选中 单
		checkCart(_id,index) {
			this.list[index].checked=!this.list[index].checked
			
			if(this.list[index].checked==true){
				this.checkYes(_id)
			}else{
				this.checkNo(_id)
			}
		},
		// 全选
		allCart() {
			let _id=[];
			this.allcheck=!this.allcheck
			
			for(let i=0;i<this.list.length;i++){
				this.list[i].checked=this.allcheck
				_id.push(this.list[i]._id)
			}
			
			if(this.allcheck==true){
				this.checkYes(_id)
			}else{
				this.checkNo(_id)
			}
			console.log(_id);
			console.log(this.allcheck);
			
		},
		// 购买
		buy(){
			let _ids=[]
			for(let i=0;i<this.list.length;i++){
				if(this.list[i].checked==true){
					_ids.push(this.list[i]._id)
				}
			}
			uni.navigateTo({
				url:'/pages/order/createOrder?cart_id='+_ids
			})
		}
	}
}
</script>

<style lang="scss">
.good-desc .del{
	width: 40px;
	height: 20px;
	line-height: 20px;
	border-radius: 4px;
	text-align: center;
	font-size: 12px;
	margin-top: 3px;
	background-color: #f5f5f5;
}
.good-desc{
	.goods-number-button{
		width: 40%;
		height: 25px;
		line-height: 25px;
		display: flex;
		justify-content: space-around;
		text-align: center;	
		button{
			width: 25px;
			height: 25px;
			line-height: 25px;
			margin: 0 auto;
			padding-left: 6px;
			text-align: center;
		}
		input{
			width: 40px;
			height: 25px;
			line-height:25px;
			text-align: center;
		}
	}
}
page {
	width: 100%;
	height: calc(100% - 110upx);
	background: #f5f5f5;
	.container {
		width: 100%;
		height: 100%;
		overflow: hidden;
		.header {
			position: relative;
			width: 100%;
			height: 360upx;
			background: #fc7827;
			background-size: cover;
			overflow: hidden;
			/*  #ifndef  APP-PLUS  */
			height: 280upx;
			background-size: 100% 100%;

			/*  #endif  */
			.title-contents {
				position: fixed;
				top: 0;
				width: 100%;
				height: calc(var(--status-bar-height) + 88upx);
				z-index: 100008;

				.top-view {
					width: 100%;
					height: var(--status-bar-height);
					background: #fc7827;
				}

				.titles {
					display: flex;
					flex-direction: row;
					height: 88upx;
					background: #fc7827;

					.titleLeftButton {
						width: 88upx;
						height: 88upx;
						line-height: 88upx;
						text-align: center;

						image {
							width: 40upx;
							height: 40upx;
						}
					}

					.titleText {
						width: 574upx;
						line-height: 88upx;
						text-align: center;
						font-size: 36upx;
						color: #fff;
					}

					.titleRightButton {
						width: 88upx;
						height: 88upx;
						line-height: 88upx;
						text-align: center;
						font-size: 32upx;
						color: #fff;
					}
				}
			}
		}

		.content-wrap {
			margin-top: 20upx;
			margin-left: 24upx;
			width: 702upx;
			//
			.content-item {
				margin-bottom: 20upx;
				border-radius: 20upx;
				background: #fff;
			}

			.goods {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20upx;

				&:last-child {
					margin-top: 0;
				}

				label {
					margin-left: 20upx;
					line-height: 214upx;
					.iconfont {
						font-size: 46upx;
						color: #bbb;
					}
					&.act .iconfont {
						color: $theme-color;
						&::before {
							content: '\e617';
						}
					}
				}

				.good {
					display: flex;
					justify-content: space-between;
					width: 624upx;
					padding: 20upx 0 0;
					box-sizing: border-box;
					border-bottom: 1px solid #eee;
					.img-wrapper {
						width: 180upx;
						height: 180upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.good-content {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 440upx;
						height: 180upx;
						padding: 0 20upx;
						box-sizing: border-box;

						.good-title {
							font-size: 28upx;
							color: #111;
							
							width: 340upx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis !important;
						}

						.spec {
							display: flex;
							flex-direction: row;

							.spec1 {
								display: flex;
								flex-direction: row;
								align-items: center;
								padding: 0 16upx;
								box-sizing: border-box;
								width: 100%;
								height: 40upx;
								border-radius: 8upx;
								//

								.name {
									display: inline-block;
									// width: 85%;
									padding: 0 15upx;
									line-height: 40upx;
									font-size: 24upx;
									color: #666;
									background: #f6f6f6;
								}

								.iconfont {
									color: #999;
								}
							}
						}

						.good-desc {
							display: flex;
							justify-content: space-between;

							.good-price {
								line-height: 38upx;
								color: #fb5248;
								font-size: 30upx;
							}
						}
					}
				}
			}
		}

		.total-wrap {
			position: fixed;
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			background: #fff;
			z-index: 9;
			/*  #ifndef  H5  */
			bottom: 0px;
			/*  #endif  */
			/*  #ifdef  H5  */
			bottom: 50px;
			/*  #endif  */

			.total-left {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-left: 20upx;
				width: 490upx;
				height: 100%;
				color: #333;
				box-sizing: border-box;

				label {
					font-size: 28upx;
					display: flex;
					align-items: center;
					.iconfont {
						font-size: 46upx;
						color: #bbb;
						margin-right: 5px;
					}
					&.act .iconfont {
						color: $theme-color;
						&::before {
							content: '\e617';
						}
					}
				}

				.total-con {
					display: flex;
					flex-direction: column;
					margin-right: 20upx;
					.top-con {
						display: flex;
						flex-direction: row;
						line-height: 100upx;
						font-size: 30upx;
						color: #333;
						.freight {
							margin-right: 16upx;
							font-size: 22upx;
							color: #999;
						}
						.symbol {
							font-size: 24upx;
							color: #fc511f;
						}

						.total {
							color: #fc511f;
						}
					}
					.bottom-con {
						display: flex;
						flex-direction: row;
						line-height: 36upx;
						font-size: 22upx;
						.discounts {
							color: #fb5248;
							margin-right: 16upx;
						}
						.detail {
							color: #666;
						}
						.iconfont {
							font-size: 14px;
						}
					}
				}
			}

			.total-right {
				width: 200upx;
				height: 80upx;
				line-height: 80upx;
				margin-top: 10upx;
				margin-right: 20upx;
				background: #fc511f;
				color: #fff;
				text-align: center;
				font-size: 28upx;
				border-radius: 40upx;
			}
		}
		.mask {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 10009;
		}
		.mask-content {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 510upx;
			background: #fff;
			z-index: 10009;
			.head {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 0 25upx;
				box-sizing: border-box;
				height: 110upx;
				.title {
					position: relative;
					padding-left: 20upx;
					box-sizing: border-box;
					line-height: 110upx;
					font-size: 32upx;
					color: #010101;
					font-weight: bold;
					&::before {
						position: absolute;
						left: 0;
						top: 40upx;
						content: ' ';
						width: 6upx;
						height: 30upx;
						background: blue;
					}
					text {
						margin-left: 20upx;
						font-weight: normal;
						font-size: 24upx;
						color: #666;
					}
				}
				image {
					width: 30upx;
					height: 30upx;
				}
			}
			.holder {
				color: #999;
			}
			.list {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin: 0 auto;
				width: 700upx;
				height: 70upx;
				// border-bottom: 1px solid #eee;
				text {
					font-size: 28upx;
					color: blue;
					text {
						margin-left: 20upx;
						font-size: 24upx;
						color: #666;
					}
				}
			}
			.footer {
				position: absolute;
				bottom: 0;
				width: 100%;
				line-height: 94upx;
				color: blue;
				background: blue;
				text-align: center;
				font-size: 34upx;
			}
		}
	}
}
</style>
